<template>
  <el-footer>
    <div class="layout">
      <div class="footer-content">
        <div class="info" >
          <p v-if="system.copyrightInfo"><a  :href="system?.copyrightInfoUrl">版权所有：{{ system?.copyrightInfo }}</a></p>
          <p v-if="system.icpRecordNumber"><a  :href="system?.icpRecordUrl">ICP备案号：{{ system?.icpRecordNumber }}</a></p>
          <p v-if="system.beianRecordNumber"><a  :href="system?.beianRecordUrl">公网安备：{{ system?.beianRecordNumber }}</a></p>
        </div>
      </div>
    </div>
  </el-footer>
</template>

<script setup>
import { ref } from 'vue'
import { selectsystem } from '@/api/setting'

// 初始化 system 为一个空对象
const system = ref({
  systemName: "",
  copyrightInfo: "",
  copyrightInfoUrl: "",
  icpRecordNumber: "",
  icpRecordUrl: "",
  beianRecordNumber: "",
  beianRecordUrl: ""
})

// // 获取设置信息
const getInfo = async () => {
  const res = await selectsystem()
  system.value = res.data[0] // 确保 res.data[0] 是一个对象
  // console.log("res", res)
  console.log("system.value", system.value)
}
getInfo()

</script>

<style scoped lang="scss">
.el-footer{
  background: #eee;
  height: max-content;
}
.footer-content {
  padding: 15px 0;
  height: 90px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  .info{

    text-align: center;
    p{
      margin: 2px 0;
      font-size: 14px;
      color: $black;
    }
  }
}
</style>
